import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../../../util/adapt';
import { systemUtil } from '../../../../../../util/native';

const bottomSafeHeight = systemUtil.getBottomSafeAreaHeight();

export default StyleSheet.create({
  background: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    height: phonePx(40) + bottomSafeHeight,
    backgroundColor: 'rgba(0, 0, 0, .4)',
    overflow: 'hidden'
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  status: {
    marginLeft: phonePx(24)
  },
  icon: {
    width: phonePx(19),
    height: phonePx(23)
  },
  currentContent: {
    width: phonePx(97),
    height: phonePx(40),
    alignItems: 'center',
    justifyContent: 'center'
  },
  time: {
    fontSize: phonePx(18),
    color: '#ffffff'
  },
  totalContent: {
    marginLeft: phonePx(11)
  },
  progressContent: {
    width: phonePx(392),
    height: phonePx(40),
    justifyContent: 'center'
  },
  all: {
    width: phonePx(392),
    height: phonePx(4),
    borderRadius: phonePx(3),
    backgroundColor: 'rgba(230, 230, 230, .6)',
    justifyContent: 'center',
    overflow: 'hidden'
  },
  progress: {
    height: phonePx(4),
    backgroundColor: '#3C96FA'
  },
  problemDot: {
    width: phonePx(4),
    height: phonePx(4),
    backgroundColor: '#F8E473',
    borderRadius: phonePx(2),
    position: 'absolute',
    top: 0
  },
  loadDot: {
    width: phonePx(80),
    height: phonePx(80),
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    top: -phonePx(20)
  },
  circle: {
    width: phonePx(14),
    height: phonePx(14),
    borderRadius: phonePx(7),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFEA6F'
  }
});
